<template>
  <div class="diff-header">
    <h2>比较结果</h2>
    <div class="diff-controls">
      <DiffStatsDisplay :stats="stats" />
      <div class="diff-actions">
        <a-button 
          type="text" 
          @click="toggleOutputFormat"
          :title="outputFormat === 'side-by-side' ? '切换到行内对比' : '切换到侧边对比'"
        >
          <template #icon>
            <SwapOutlined />
          </template>
          {{ outputFormat === 'side-by-side' ? '行内对比' : '侧边对比' }}
        </a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { SwapOutlined } from '@ant-design/icons-vue'
import DiffStatsDisplay from './DiffStatsDisplay.vue'

interface DiffStats {
  additions: number
  deletions: number
  changes: number
}

interface Props {
  stats: DiffStats
  outputFormat: 'side-by-side' | 'line-by-line'
}

interface Emits {
  (e: 'toggle-format'): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

const toggleOutputFormat = () => {
  emit('toggle-format')
}
</script>

<style scoped>
.diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.diff-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.diff-controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

.diff-actions {
  display: flex;
  gap: 8px;
}

.diff-actions .ant-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.diff-actions .ant-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .diff-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .diff-controls {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
  }
}
</style>
